﻿@model WebCalendar.Models.DTOs.CalendarIndexDTO
@{ 
    Layout = null;
    System.Globalization.CultureInfo ci = new System.Globalization.CultureInfo("en-US");
    string RoleValue = "";
    if (Model.Role != null)
    {
        if (Model.Role is WebCalendar.Models.OwnerRole)
        {
            RoleValue = "owner";
        }
        else if (Model.Role is WebCalendar.Models.EditorRole)
        {
            RoleValue = "editor";
        }
        else if (Model.Role is WebCalendar.Models.MemberRole)
        {
            RoleValue = "member";
        }
    }
    else
    {
        RoleValue = "viewer";
    } 
}

@Html.Partial("_CalendarMenu",  new WebCalendar.Models.DTOs.CalendarMenuDTO( Model, "Calendar"))
<input id="AddEntryUrl"  type="hidden" value="@Url.Action("AddEntry","Calendar", new{ id = Model.CalendarID, month=Model.DateToShow.Month }, "http")" />
<input id="UpdateEntryUrl"  type="hidden" value="@Url.Action("UpdateEntry","Calendar", new{ id = Model.CalendarID, month=Model.DateToShow.Month }, "http")" />
<input id="GetDataUrl"  type="hidden" value="@Url.Action("GetEntries","Calendar", new{ id = Model.CalendarID, month=Model.DateToShow.Month }, "http")" />
<input id="DeleteEntryUrl"  type="hidden" value="@Url.Action("DeleteEntry","Calendar",null, "http")" />
<input id="Year"  type="hidden" value="@Model.DateToShow.Year" />
<input id="Month"  type="hidden" value="@Model.DateToShow.Month" />
<input id="SiteType" type="hidden" value="calendar" />
@{
         
}
<input id="Role"  type="hidden" value="@RoleValue" />



<div id="CAL-Month-Table" data-bind=" template: { name: 'weekTemplate', foreach: weeks, as: 'week' }">
    <div class="CAL-Day-MonthView-Row CAL-MountView-DayHeaders">
    <div class="CAL-MonthView-DayNameHeader">
        Monday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Tuesday
    </div>
    <div class="CAL-MonthView-DayNameHeader">Wednesday</div>
    <div class="CAL-MonthView-DayNameHeader">
        Thursday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Friday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Saturday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Sunday
    </div>
</div>
    <script type="text/html" id="weekTemplate">
        <div class="CAL-Day-MonthView-Row" data-bind="template: { name: 'dayTemplate', foreach: Days, as: 'day' }"  ></div>
    </script>
    <script type="text/html" id="dayTemplate">
        <div class="CAL-Day-MonthView" data-bind="click: day_click, css: { 'CAL-Today': Date.format('YYYY MM DD') == moment().format('YYYY MM DD') }">
            <div><span data-bind="text: Date.format('D')" ></span></div>
            <!-- ko foreach: Entries -->
                <div class="CAL-Entry-MountView primary-5" data-bind=" click: function(){ entry_click($parent)}, clickBubble: false, style: { backgroundColor: Category().Color }" >
                    <span data-bind="text:DisplayTitle, title:Description" style="cursor:pointer;" ></span>
                    @*<span class="CAL-DeleteEntry-Button" data-bind="  click: function(){ delete_entry($parent)}, clickBubble: false">x</span>*@
                    <span class="CAL-DeleteEntry-Button" data-bind="visible: $root.siteType == 'owner', click: function(){ delete_entry($parent)}, clickBubble: false">x</span>
                </div>
            <!-- /ko -->
        </div>
    </script>
</div>


<div id="CAL-New-Entry-Dialog" class="CAL-Dialog">
    <div  data-bind="with: current_entry"  class="div-table " >
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">When</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><span data-bind="text: StartDate().format('LL')"></span></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">What</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-NewEntry-Title" type="text" data-bind="value: Title, valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1 vertical-align-top">Description</div>
            <div class="div-table-col CAL-EntryDialog-Col2" >
                <textarea data-bind="value: Description"></textarea>
            </div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Category</div>
            <div class="div-table-col CAL-EntryDialog-Col2">

                <select data-bind="options: $parent.categories, 
                   optionsText: function(item) { 
                       return item.Name; 
                   }, 
                   value: Category">
                </select>
            </div>
        </div>
    </div>
</div>

<div id="CAL-Edit-Entry-Dialog" class="CAL-Dialog">
    <div  data-bind="with: edit_entry"  class="div-table " >
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Start</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-EditEntry-StartDate" type="text" data-bind="value: StartDate().format('HH:mm'), enable: ($root.role == 'editor' || $root.role == 'owner' ) ,  valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">End</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-EditEntry-EndDate" type="text" data-bind="value: EndDate().format('HH:mm'),enable: ($root.role == 'editor' || $root.role == 'owner' ), valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Title</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-EditEntry-Title" type="text" data-bind="value: Title, enable: ($root.role == 'editor' || $root.role == 'owner' ), valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1 vertical-align-top">Description</div>
            <div class="div-table-col CAL-EntryDialog-Col2" >
                <textarea data-bind="value: Description, enable: ($root.role == 'editor' || $root.role == 'owner' )"></textarea>
            </div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Category</div>
            <div class="div-table-col CAL-EntryDialog-Col2">

                <select data-bind="options: $parent.categories, 
                   optionsText: function(item) { 
                       return item.Name; 
                   }, 
                   value: Category, enable: ($root.role == 'editor' || $root.role == 'owner' )">
                </select>
            </div>
        </div>
    </div>
</div>

